<template>
  <div class="content-wrap">
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.go(-1)">
    </van-nav-bar>

    <div class="content">
      <van-cell-group class="checkGroup">
        <van-cell title="头像" center >
          <img :src="userData.icon" class="avatar">
        </van-cell>
        <van-cell title="昵称" is-link center :value="userData.nickname" :to="{path: 'editUserMsg', query: {type: 1}}">
        </van-cell>
        <van-cell title="密聊号" center :value="userData.username">
        </van-cell>
        <van-cell title="性别" center is-link>
          <select class="cell-select" :value="userData.sex" @change="changeSex" v-model="sex">
            <option value="1">男</option>
            <option value="2">女</option>
            <option value="3">保密</option>
          </select>
        </van-cell>
        <van-cell title="地区" center :value="userData.area ? userData.area : '未设置'" is-link
                  @click="areaSelectShow = true">
        </van-cell>
        <van-cell title="个性签名" center :value="userData.content ? userData.content : '未设置'" is-link
                  :to="{path: 'editUserMsg', query: {type: 2}}">
        </van-cell>
      </van-cell-group>

      <van-popup
        v-model="areaSelectShow"
        position="bottom"
      >
        <van-picker :columns="columns" @change="onChange"
                    title="选择地区"
                    show-toolbar
                    @cancel="areaSelectShow = false"
                    @confirm="onConfirm"/>
      </van-popup>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Socket from '../../utils/socket'

  export default {
    name: 'userEdit',
    data () {
      return {
        area: '',
        areaSelectShow: false,
        areaList: [],
        sex: '',
        columns: []
      }
    },
    computed: {
      ...mapState({
        userData: state => state.user.userData
      })
    },
    methods: {
      selectArea (obj) {
        this.area = obj.map(item => {
          return item.name
        }).join(' ')
        this.areaSelectShow = false
      },
      changeSex () {
        Socket.sendData('setUserSex', { sex: this.sex }).then(res => {
          this.$store.commit('setObjAttr', { obj: 'userData', attr: 'sex', data: this.sex })
        })
      },
      onChange (picker, values) {
        let pid = this.areaList.find(item => {
          return item.city === values[0]
        }).id
        let childList = this.areaList.filter(item => {
          return item.pid === pid
        }).map(city => city.city)
        picker.setColumnValues(1, childList)
      },
      onConfirm (value) {
        this.areaSelectShow = false
        const list = this.areaList
        let pid = list.find(item => {
          return item.city === value[0]
        }).id
        let id = list.find(item => {
          return item.city === value[1]
        }).id
        Socket.sendData('setUserArea', { area: `${pid},${id}` }).then(() => {
          this.$store.commit('setObjAttr', { obj: 'userData', attr: 'area', data: value.join('') })
        })
      }
    },
    created () {
      this.sex = this.userData.sex
      Socket.sendData('getCity').then(res => {
        this.areaList = res.data
        let parentList = res.data.filter(item => {
          if (item.pid === '0') {
            return item.city
          }
        })
        let childList = res.data.filter(item => {
          if (item.pid === '1') {
            return item.city
          }
        })
        this.columns.push({
          values: parentList.map(city => city.city)
        })
        this.columns.push({
          values: childList.map(city => city.city)
        })
      })
    }
  }
</script>

<style scoped lang="scss">
  .avatar {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    vertical-align: middle;
  }

  .cell-select {
    color: #999;
    font-size: 1em;
    width: 100%;
    text-align: right;
    direction: rtl;
    border: none;
    outline: none;
    background: none;
  }
</style>
